<template>
  <!-- 编辑服务 -->
  <view class="edit-serve-popup">
    <view class="title">添加商品</view>
    
    <view class="form-box">
      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">服务名</text>
        <input type="text" v-model="formData.service_Name" placeholder="请输入服务名" >
      </view>
      
      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">销售价</text>
        <input type="number" v-model="formData.service_Price" placeholder="请输入销售价" >
        <text>元</text>
      </view>
      
      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">数量</text>
        <view class="num-box flex flex-ai-c">
          <text class="btn" @click="less()">-</text>
          <input type="number" v-model="formData.serviceNum" class="cont" />
          <text class="btn" @click="add()">+</text>
        </view>
      </view>
    </view>
    
    <!-- 按钮 -->
    <view class="btn-box flex">
      <view class="btn" @click="confirm()">
        <i-button text="取消" bg-color="#333" color="#FFE23E" shape="circleLeft"></i-button>
      </view>
      <view class="btn" @click="confirm(true)">
        <i-button text="确定" color="#333" shape="circleRight"></i-button>
      </view>
    </view>
  </view>
</template>

<script>
  import iButton from '@/components/carGoods/i-button.vue'
  
  export default {
    name: 'addGoodsPopup',
    components: { iButton },
    data() {
      return {
        formData: {
          name: '',
          entryPrice: '',
          markup: '',
          price: '',
          amount: 1
        }
      }
    },
    
    methods: {
      // 减
      less() {
        if (this.formData.serviceNum === 1) return
        this.formData.serviceNum -= 1
      },
      
      // 加
      add() {
        this.formData.serviceNum += 1
      },
      
      // 确定
      confirm(type) {
        this.$emit('change', {
          type,
          data: this.formData
        })
      },
      
      // 跳转选择商品页
      goSelectGoods() {
        uni.navigateTo({
          url: '/pages_afterSales/selectOrderType/selectOrderType'
        })
      },
      
      // 父组件调用，填充页面数据
      loadData(data) {
        this.formData = data
      }
    }
  }
</script>

<style lang="scss" scoped>
.edit-serve-popup {
  .title {
    padding: 33rpx 0;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }
}

// 表单
.form-box {
  padding: 0 24rpx;
  
  .item {
    padding: 33rpx 0;
    border-bottom: 1px solid #eee;
    
    > input {
      flex: 1;
      padding: 0 80rpx;
      font-size: 28rpx;
    }
    
    // 计数器
    .num-box {
      .btn {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 48rpx;
        color: #999;
      }
      .cont {
        width: 48rpx;
        height: 48rpx;
        margin: 0 16rpx;
        background-color: #EEEEEE;
        border-radius: 10rpx;
        text-align: center;
      }
    }
  }
}

// 底部按钮
.btn-box {
  padding: 24rpx;
  
  .btn {
    width: 50%;
    
    .i-button {
      width: 100%;
    }
  }
}
</style>
